<template>
  <div>
    <div class="my">
      <div class="user flex start">
        <img :src="user.headImgPath">
        <div class="info">
          <p class="fz30 mb10"> {{user.userName}}</p>
          <p> {{user.userMobile}}</p>
        </div>
      </div>
      <div class="order">
        <div class="tit  flex between">
          <span>我的订单</span>
          <span @click="goOrder(0)">全部订单</span>
        </div>
        <div class="orders flex between">
          <div class="flex column"
               @click="goOrder(1)">
            <img src="../../assets/image/order.png"
                 width="30">
            <p class="mt10">待付款</p>
          </div>
          <div class="flex column"
               @click="goOrder(2)">
            <img src="../../assets/image/ing.png"
                 width="30">
            <p class="mt10">已付款</p>
          </div>
          <div class="flex column"
               @click="goOrder(3)">
            <img src="../../assets/image/down.png"
                 width="30">
            <p class="mt10">已取消</p>
          </div>
        </div>

      </div>
      <group class="cell"
             gutter="0">
        <cell title="我的会员卡"
              is-link
              link="/mycard">
        </cell>
        <cell title="购卡记录"
              is-link
              link="/record">
        </cell>
        <cell title="我的地址"
              is-link
              link="/addr">
        </cell>
        <cell title="联系我们"
              is-link
              @click.native="call">
        </cell>
      </group>
      <div class="out"
           @click="out"><span>退出</span><img src="../../assets/image/out.png"
             width="20"></div>

    </div>

  </div>

</template>
<script>
import { Cell, Group, Toast, XInput } from 'vux'
import * as API from '../../api'
import { mapGetters, mapActions } from 'vuex'
export default {
  components: {
    Cell,
    Group,
    Toast,
    XInput
  },
  data () {
    return {
      show: true,
      count: '',
      timer: null,
      active: false,
      toastshow: false,
      verNumb: '',
      mesg: '',
      phone: '',
      user: ''
    }
  },
  created () {
    console.log(this.userInfo);

    this.$http.get(API.initialize).then(res => {
      this.phone = res.data.phone
    }).catch(err => {
      console.log(err)
    })
    this.$http.get(API.user, {
      params: {
        openId: this.userInfo.openId
      }    }).then(res => {
      this.user = res.data
      this.initUser(res.data)
    }).catch(err => {
      console.log(err)
    })
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    ...mapActions(['initUser']),
    call () {
      window.location.href = 'tel:// ' + this.phone
    },
    goOrder (type) {
      this.$router.push({ path: '/order', query: { orderType: type } })
    },
    out () {
      console.log('清除所有缓存')
      this.$http.get(API.logout, {
        params: {
          openId: this.user.openId
        }      }).then(res => {
        this.user.loginStatus = '0'
        this.initUser(this.user)
        this.$router.push('/')
      }).catch(err => {
        console.log(err)
      })
      localStorage.clear()
    }
  }

}
</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";
.user {
  background-image: linear-gradient(-227deg, #40b9ff, #4285f6);
  height: 100px;
  padding: 40px;
  @extend .col_fff;
  img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-right: 20px;
  }
}
.order {
  margin: 20px 0;
  width: 100%;
  box-sizing: border-box;
  @extend .bg_fff;
  .tit {
    padding: 20px;
    font-size: 28px;
    @extend .bor_b;
  }
  .orders {
    padding: 20px 0;
    div {
      flex-grow: 1;
    }
  }
}
.cell {
  margin-bottom: 20px;
}
.out {
  @extend .flex;
  @extend .between;
  @extend .bg_fff;
  @extend .fz28;
  padding: 20px 30px;
}
.register {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
